import {LockOutlined, UserOutlined,} from '@ant-design/icons';
import {LoginForm, ProConfigProvider, ProFormText,} from '@ant-design/pro-components';
import {notification, Tabs} from 'antd';
import {CSSProperties, useState} from 'react';
// import {login} from "@/api/auth";
import myImage from '../../assets/loginBg.27776d69.jpg';
import {useNavigate} from "@@/exports";
import {setValueToStore, STORE_KEY} from "@/store/store";

type LoginType = 'account';

export default () => {
    const [loginType, setLoginType] = useState<LoginType>('account');
    const [notificationApi, contextHolder] = notification.useNotification();
    const navigate = useNavigate();

    const formStyle: CSSProperties = {
        height: 'calc(100vh - 64px)',
        background: `url(${myImage})`,
        backgroundPosition: 'center center',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundAttachment: 'fixed',
        overflow: 'hidden' ,
    }

    // const onLoginSubmit = async (loginForm) => {
    //     login(loginForm)
    //         .then(res => {
    //             const unwrap = res.data
    //             if (unwrap.code !== 200) {
    //                 notificationApi.error({
    //                     message: unwrap.info,
    //                     description: unwrap.description,
    //                     showProgress: true,
    //                     pauseOnHover: true
    //                 })
    //                 return
    //             }
    //
    //             // 登录成功
    //             const token = unwrap.data.authToken
    //             setValueToStore(STORE_KEY.AUTH_TOKEN, token)
    //             notificationApi.success({
    //                 message: '登录成功',
    //                 description: unwrap.info,
    //                 showProgress: false,
    //                 pauseOnHover: true,
    //                 duration: 0.5,
    //                 onClose() {
    //                     navigate("/")
    //                 }
    //             })
    //         })
    //         .catch(err => {
    //             notificationApi.error({
    //                 message: '系统错误',
    //                 description: err.message,
    //                 showProgress: true,
    //                 pauseOnHover: true
    //             })
    //         })
    // }

    return (
        <ProConfigProvider hashed={false}>
            {contextHolder}
            <div style={formStyle}>
                <LoginForm
                    autoComplete={"off"}
                    contentStyle={{
                        minWidth: 280,
                        maxWidth: '75vw',
                    }}
                    title="AI简历助手"
                    subTitle="专注优化和修改简历好手🐂"
                    // onFinish={onLoginSubmit}
                >
                    <Tabs
                        centered
                        activeKey={loginType}
                        onChange={(activeKey) => setLoginType(activeKey as LoginType)}
                    >
                        <Tabs.TabPane key={'account'} tab={'账号密码登录'}/>
                    </Tabs>
                    {loginType === 'account' && (
                        <>
                            <ProFormText

                                name="userName"
                                fieldProps={{
                                    size: 'large',
                                    prefix: <UserOutlined className={'prefixIcon'}/>,
                                }}
                                placeholder={'请输入用户名 (默认: dtp)'}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户名!',
                                    },
                                ]}
                            />
                            <ProFormText.Password
                                name="password"
                                fieldProps={{
                                    size: 'large',
                                    prefix: <LockOutlined className={'prefixIcon'}/>
                                }}
                                placeholder={'请输入密码 (默认: dtp)'}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码！',
                                    },
                                ]}
                            />
                        </>
                    )}
                </LoginForm>
            </div>
        </ProConfigProvider>
    );
};